<template>
	<ul class="list-item-20180416 overflow-h">
		<li v-for="item in listData">
			<div class="pic"><img :src="item.url" /></div>
			<div class="info">
				<h2 class="ecs ecs-2">{{item.title}}</h2>
				<span class="money">
					<sub>￥</sub><sup>{{item.activePrice}}</sup>
				</span>
				<button class="go" @click="goActivityGoods(item.id)">立即购买</button>
			</div>
		</li>
	</ul>
</template>

<script>
	import Utils from '@/util/util';

	export default {
		components: {
			
		},
		props: ['listData'],
		methods: {
			goActivityGoods: function(goodsId) {
				let self = this;
	    		if(this.flag) return;
	    		this.flag = true;
	    		Utils.goGoods(goodsId);
				setTimeout(()=>{ self.flag = false }, 1000);
			}
		},
		data() {
			return {
				flag: false
			}
		}
	}
</script>
<style lang="less">
	@import '~@/assets/less/main.less';
	.list-item-20180416 {
		li {
			width: 3.5rem;
			padding-bottom: .2rem;
			overflow: hidden;
			&:nth-child(odd) {
				clear: both;
				float:left;
			}
			&:nth-child(even) {
				float: right;
			}
			.pic {
				width: 3.5rem;
				height: 3.5rem;
				background-color: #fff;
				border-top-left-radius: .1rem;
				border-top-right-radius: .1rem;
				img {
					width: 100%;
					border-top-left-radius: .1rem;
					border-top-right-radius: .1rem;
				}
			}
			.info {
				background-color: #fff;
				margin-top: .02rem;
				padding: 0 .2rem .2rem;
				overflow: hidden;
				border-bottom-left-radius: .1rem;
				border-bottom-right-radius: .1rem;
				h2 {
					height: .7rem;
					font-size: .3rem;
					margin: .2rem 0 0;
					line-height: .4rem;
					overflow: hidden;
				}
				.money {
					display: block;
					margin: .1rem 0;
					height: .88rem;
					line-height: .88rem;
					background: url('~@/assets/imgs/20180416/ymsc_activity_icon.jpg') left center no-repeat;
					background-size: .88rem auto;
					sub, sup {
						display: inline-block;
						color: #ff4b71;
						font-size: .34rem;
						vertical-align: middle;
					}
					sub {
						margin-left: 1rem;
					}
				}
				button.go {
					width: 3rem;
					height: .56rem;
					background: #ff4b71;
					font-size: .24rem;
					color: #fff;
					border-radius: .1rem;
					border: none;
					padding: 0;
				}
			}
		}
	}
</style>